<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('提交下一步')" />
	<th:block th:include="include :: bootstrap-duallistbox-css" />
	<th:block th:include="include :: summernote-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
    	<form class="form-horizontal m" id="form-flow-submit">
    		<input id="businessKey" name="businessKey" th:value="${businessKey}"  type="hidden">
    		<div class="form-group">
                <label class="col-sm-2 control-label">当前环节：</label>
                <div class="col-sm-10">
                    <input id="currentNode" th:value="${currentNode.name}" class="form-control" type="text" readonly="readonly">
                </div>
            </div>
			<div class="form-group">
				<label class="col-sm-2 control-label">流转操作：</label>
				<div class="col-sm-10">
	                <div class="radio-box" th:each="handle : ${handles}">
						<input type="radio" name="handleId" th:id="${handle.id}" th:value="${handle.id}" required="required">
						<label th:for="${handle.id}" th:text="${handle.name}"></label>
					</div>
				</div>
			</div>
			<div class="form-group">	
                <label class="col-sm-2 control-label">下一环节：</label>
                <div class="col-sm-10">
                    <input id="nextNode" class="form-control" type="text" readonly="readonly">
                </div>
            </div>
			<div class="form-group">
                <div class="col-sm-12">
                    <input id="message" name="message" type="hidden">
                    <div class="summernote"></div>
                </div>
            </div>
            <div class="ibox" id="user-select" style="display: none;">
                <div class="ibox-title">
                    <p>选择下一步操作人员</p>
                </div> 
                <div class="ibox-content">
                	<!-- multiple:多选，single:单选 -->
                    <select class="form-control user-select" name="userId" single="single"></select>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-duallistbox-js" />
    <th:block th:include="include :: summernote-js" />
    <script type="text/javascript">
	    
	    $('.summernote').summernote({
	    	placeholder: '请输入办理意见',
	    	height : 100,
			lang : 'zh-CN',
			followingToolbar: false,
			callbacks: {
                onImageUpload: function (files) {
                    sendFile(files[0], this);
                }
            }
	    });
		var content = $("#message").val();
	    $('.summernote').summernote('code', content);
	    
	 // 上传文件
	    function sendFile(file, obj) {
	        var data = new FormData();
	        data.append("file", file);
	        $.ajax({
	            type: "POST",
	            url: ctx + "common/upload",
	            data: data,
	            cache: false,
	            contentType: false,
	            processData: false,
	            dataType: 'json',
	            success: function(result) {
	                if (result.code == web_status.SUCCESS) {
	                	$(obj).summernote('editor.insertImage', result.url, result.fileName);
					} else {
						$.modal.alertError(result.msg);
					}
	            },
	            error: function(error) {
	                $.modal.alertWarning("图片上传失败。");
	            }
	        });
	    }
	    
		$("#form-flow-submit").validate({
			focusCleanup: true
		});
		
		var dualListbox = $('.user-select').bootstrapDualListbox({
	    	nonSelectedListLabel: '待选择用户',
            selectedListLabel: '已选择用户',
            preserveSelectionOnMove: 'moved',
            moveOnSelect: false,// 出现一个剪头，表示可以一次选择一个
            filterTextClear: '展示所有',
            moveSelectedLabel: "添加",
            moveAllLabel: '添加所有',
            removeSelectedLabel: "移除",
            removeAllLabel: '移除所有',
            infoText: '共{0}项',
            infoTextFiltered: '从{1}项中筛选{0}项',
            infoTextEmpty: '没有选项',
            showFilterInputs: true,// 是否带搜索
	        selectorMinimalHeight: 160
	    });
		
		$('input[type="radio"]').on('ifChecked', function(event){  
    		var handleId = $(event.target).val();
    		var businessKey = $("#businessKey").val();
            var url = ctx + "flowable/task/assignee/" + businessKey + "/" + handleId;
            $.ajax({
            	url: url,
    	        type: 'POST',
    	        dataType: 'json',
            	success: function(result){
            		if(result.data.users != null){
            			$('#user-select').show();
            			$('.user-select').empty();
                		var selector = $('.user-select')[0];
                		$(result.data.users).each(function () {
    	            		var o = document.createElement("option");
    	            		o.value = this.loginName;
    	            		o.text = this.loginName + " : " + this.userName;
    	            		if(typeof(selector) != "undefined") {
    	            			selector.options.add(o);
    	            		}
                		});
                		dualListbox.bootstrapDualListbox('refresh');
            		}else{
            			$('#user-select').hide();
            			$('.user-select').empty();
            		}
            		$("#nextNode").val(result.data.nextNode.name);
            	}
        	});
		});
		
		function submitHandler() {
	        if ($.validate.form()) {
	        	var sHTML = $('.summernote').summernote('code');
				$("#message").val(sHTML);
				$.operate.save(ctx + "flowable/task/submit", $('#form-flow-submit').serialize());
	        }
	    }
	</script>
</body>
</html>
